const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //将css打包成独立的文件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // css的压缩


const HtmlWebpackPlugin = require('html-webpack-plugin') //html

const ESLintPlugin = require('eslint-webpack-plugin')  //格式化校验
const CopyWebpackPlugin = require("copy-webpack-plugin") //静态资源

module.exports = {
    //打包模式
    mode: path.resolve(__dirname, "../src/index.js"),

    //入口文件
    entry: "./src/index.js",

    //出口文件
    output: {
        path: path.resolve(__dirname, "../build"),
        filename: "./js/bundle.js"
    },

    //模块配置，配置loader
    module: {
        rules: [{
            //test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
            test: /\.css$/i,
            /* 
                css-loader:为了识别css类型文件进行打包
                style-loader:js把样式放在style标签中,并插入到页面中
                use后如果是一个数组,则是从后向前一致加载
            */
            use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
            /* 
              test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
            */
            test: /\.less$/i,
            /* 
              less-loader:识别less文件类型
              css-loader:为了识别css类型文件进行打包
              style-loader:js把样式放在style标签中,并插入到页面中
              use后如果是一个数组,则是从后向前一致加载
            */
            use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
        },{
            test: /\.(png|jpg|gif|svg)$/,
            //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
            type: "asset",
            parser: {
                dataUrlCondition: {
                    maxSize: 30 * 1024, // 小于15kb以下的图片会被打包成base64格式
                },
            },
            generator: {
                filename: 'images/[name][ext]'
            }
        },]
    },

    //插件配置
    plugins: [new MiniCssExtractPlugin({
        filename: "./css/main.css"
    }), new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "../public/index.html"),
        filename: "index.html",
        minify: {
            collapseWhitespace: true,
            keepClosingSlash: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            useShortDoctype: true
        }
    }), new ESLintPlugin({
        fix: true
    }), new CopyWebpackPlugin({
        patterns: [{
            from: path.resolve(__dirname, "../public"),
            to: "public",
            //配置复制时忽略的文件
            globOptions: {
                ignore: ["**/index.html"]
            }
        }],
    }),],

    //优化的配置 压缩css
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },

}